<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../plugins/font-awesome-4.7.0/css/font-awesome.min.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../layuiadmin/style/admin.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../plugins/layui/css/style.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../plugins/layui/css/add.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../plugins/layui/css/sm.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../plugins/toastr/toastr.min.css?v=${.Config.basic.version}">

    <style>

        .layui-form-item .layui-input-inline {
            float: left;
            width: 150px;
            margin-right: 10px;
        }
        .layui-form-item {
            margin-top: 5px;
            margin-bottom: 10px;
        }
    </style>
    <style>
        /* .layui-table-view .layui-table td, .layui-table-view .layui-table th {
            padding: 5px 0;
            border-top: 1px solid #404453;
            border-left: 1px solid #404453;
            border-bottom: 1px solid #404453;
            border-right: 1px solid #404453;
        } */
    </style>
</head>
<body>
<div class="">


    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label auto-size-label">关键字</label>
                        <div class="layui-input-inline">
                            <input type="text" name="txt_key" lay-verify="" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" lay-filter="btn_search"><i class="layui-icon layui-icon-search"></i>查询</button>
                    </div>

                    <div class="layui-inline fr">
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-normal  action-edit layui-hide" lay-event="add" onclick="onAdd();"><i class="layui-icon layui-icon-add-circle"></i> 增加角色</button>
                    </div>

                </div>
            </form>
            <table class="layui-hide" id="table" lay-filter="table"></table>
        </div>
    </div>
</div>

<table class="layui-hide" id="table" lay-filter="table"></table>
<!-- <script type="text/html" id="user_table_toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-normal layui-hide action-edit" lay-event="add">增加</button>
    </div>
</script> -->



<script type="text/html" id="table_action_bar">
    <a lay-event="edit" href="#" class="layui-hide action-edit" onclick=""><i class="fa fa-edit fa-lg layui-text-mute"></i></a>
    <a lay-event="del" href="#" class="layui-hide action-delete" onclick=""><i class="fa fa-trash fa-lg layui-text-mute"></i></a>
</script>

<script src="../plugins/layui/layui.js?v=${.Config.basic.version}"></script>
<script src="../plugins/jquery/jquery-1.10.2.js?v=${.Config.basic.version}"></script>
<script src="../plugins/toastr/toastr.min.js"></script>
<script>
    var table=null;
    var form=null;

    var Table=null;
    var sys_roles=null;
    var token = window.localStorage.getItem("token");
    var user_info=JSON.parse(window.localStorage.getItem("user_info"));
    var is_admin = user_info.is_admin;
    var func_url="${.func_url}";
    var actions=[];
    var permissions=[];
    var lay_index=null;

    var SYS_POSITION_TYPE=[];

    var mode="";
    token = 'Bearer ' + token;
    layui.config({
        base: '../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table','form','iconPicker'], function(){
        $ = layui.$;
        form = layui.form;
        table = layui.table;
        toastr.options = {
            "closeButton": false, //是否显示关闭按钮
            "debug": false, //是否使用debug模式
            "positionClass": "toast-top-center",//弹出窗的位置
            "showDuration": "300",//显示的动画时间
            "hideDuration": "1000",//消失的动画时间
            "timeOut": "2000", //展现时间
            "extendedTimeOut": "1000",//加长展示时间
            "showEasing": "swing",//显示时的动画缓冲方式
            "hideEasing": "linear",//消失时的动画缓冲方式
            "showMethod": "fadeIn",//显示时的动画方式
            "hideMethod": "fadeOut" //消失时的动画方式
        };

        $.ajax({
            type: 'GET',
            url: '../Api/User/Actions',
            data: {func_url:func_url},
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
            },
            dataType: "json",
            success: function (data) {
                console.info(data)
                actions=data.data;
                for(var i=0;i<actions.length;i++){
                    $('.action-'+actions[i].action_id).removeClass("layui-hide");
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg('加载操作信息失败');
            }
        });

        $.ajax({
            type: 'GET',
            url: '../Api/User/Permission',
            data: {func_url:func_url},
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
            },
            dataType: "json",
            success: function (data) {
                permissions=data.data;

            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg('加载权限信息失败');
            }
        });

        $.ajax({
            type: 'GET',
            url:"/Api/Dictionary",
            data: {code:"SYS_POSITION_TYPE"},
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
            },
            success: function(data){
                if(data){
                    var list=data.data;
                    console.info(list);
                    SYS_POSITION_TYPE=list;
                    renderSelect();
                }
            },
            complete: function(XMLHttpRequest, textStatus) {
                //layer.closeAll('loading');
            },
            dataType: "json"
        });
        
        //监听提交
        form.on('submit(btn_search)', function(data){
            //layer.alert(JSON.stringify(data.field), {title: '最终的提交信息'})
            search({key:data.field.txt_key});
            return false;
        });

        form.on('submit(btn_ok)', function(data){
            var field = data.field; //获取提交的字段
            $.ajax({
                type: mode,
                url: '../Api/Role',
                data: field,
                beforeSend: function(request) {
                    request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (data) {
                    //console.info(data)
                    if(data.code>=0){
                        toastr.success("保存成功");
                        layui.table.reload('table'); //重载表格
                        layer.close(lay_index); //再执行关闭
                    }else{
                        layer.alert('保存失败:'+data.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert('保存失败');
                }
            });
        });

        setTimeout(function(){
            initTable();
        },200);

    });

    function renderSelect(){
        //栏舍下拉
        var html="<option selected value=''></option>";
        for(var i=0;i<SYS_POSITION_TYPE.length;i++){
            if(is_admin){
                html+="<option  value=\""+SYS_POSITION_TYPE[i].data_value+"\">"+SYS_POSITION_TYPE[i].data_text+"</option>";
            }else{
                if(SYS_POSITION_TYPE[i].data_value=="engineer"||SYS_POSITION_TYPE[i].data_value=="service"){
                    
                }else{
                    html+="<option  value=\""+SYS_POSITION_TYPE[i].data_value+"\">"+SYS_POSITION_TYPE[i].data_text+"</option>";
                }
            }
            
        }

        $("select[name='position_type']").html(html);

        form.render('select');
    }

    function initTable(){
        Table = table.render({
            elem: '#table'
            //,data:data
            ,url:'../Api/Role'
            ,height: 'full-90'
            ,method:'GET'
            ,headers : {'Authorization': 'Bearer '+window.localStorage.getItem("token")}
            ,where: {}
            ,page: false
            ,limit:30
            //,toolbar: '#user_table_toolbar' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['']
            ,title: ''
            ,even:false
            ,size: 'sm' //小尺寸的表格
            ,cols: [[
                //{type: 'checkbox', fixed: 'left'}
                {field:'id', title:'ID', unresize: false, sort: true}
                ,{field:'name', title:'名称'}
                //,{field:'name_en', title:'名称(英文)', width:150}
                ,{field:'', title:'职务级别', width:200,templet: function(d){
                    var html='';
                    if(d.position_type) {
                        for(var i=0;i<SYS_POSITION_TYPE.length;i++){
                            if(SYS_POSITION_TYPE[i].data_value == d.position_type){
                                html += "<button class=\"layui-btn layui-btn-primary layui-btn-xs\">"+SYS_POSITION_TYPE[i].data_text+"</button>";
                                break;
                            }
                        }
                    }
                    return html;
                }}
                ,{title:'操作', width:100, toolbar:'#table_action_bar'}
            ]]
            ,done: function(res, curr, count){
                for(var i=0;i<actions.length;i++){
                    $('.action-'+actions[i].action_id).removeClass("layui-hide");
                }

            }
        });

        //头工具栏事件
        table.on('toolbar(table)', function(obj){
            switch(obj.event){
                case 'add':
                    onAdd();
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(table)', function(obj){
            var data = obj.data;
            console.log(data)
            if(obj.event === 'del'){
                onDelete(data);
            }
            else if(obj.event === 'edit'){
                onEdit(data);
            }
        });
    }

    function onAdd() {
        $("input[name='id']").removeAttr("readonly");
        mode="POST";
        $("#form")[0].reset();
        layui.form.render();
        layer.open({
            //area: 'auto',
            area:['450px','500px'],
            type: 1,
            shade: 0.3,
            shadeClose:true,
            offset: '100px',
            title: '新增', //不显示标题
            content: $('#form'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            btn: ['确定', '取消']
            ,yes: function(index, layero){
                lay_index=index;
                var submit = layero.find("#btn_ok");
                submit.click();
            }
        });
    }

    function onEdit(item) {
        $("input[name='id']").attr("readonly","readonly");
        mode="PUT";
        layer.open({
            //area: 'auto',
            area:['450px','500px'],
            type: 1,
            shade: 0.3,
            shadeClose:true,
            offset: '100px',
            title: '修改', //不显示标题
            content: $('#form'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            btn: ['确定', '取消']
            ,yes: function(index, layero){
                lay_index=index;
                var submit = layero.find("#btn_ok");
                submit.click();
            }
        });

        layer.load(1);
        $.ajax({
            type: 'GET',
            url:"../Api/Role",
            data: {id:item.id},
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
            },
            success: function(data){
                if(data){
                    form.val("form", data.data[0]);
                }

            },
            complete: function(XMLHttpRequest, textStatus) {
                layer.closeAll('loading');
            },
            dataType: "json"
        });
    }

    function onDelete(item) {
        layer.confirm('确认删除'+item.name+"?", function(index){
            //obj.del();
            layer.close(index);
            $.ajax({
                type: 'DELETE',
                url: '../Api/Role',
                data: item,
                beforeSend: function(request) {
                    request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (data) {
                    //console.info(data)
                    if(data.code==0){
                        //layer.msg('成功');
                        layui.table.reload('table'); //重载表格
                        layer.close(index); //再执行关闭
                    }else{
                        layer.alert('失败:'+data.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert('失败');
                }
            });
        });
    }

    function search(params) {
        Table.reload({
            where: params
            /*,page: {
                curr: 1 //重新从第 1 页开始
            }*/
        });
    }


</script>
<script src="../js/check_screen.js?v=${.Config.basic.version}"></script>

</body>

<form class="layui-form " lay-filter="form" id="form" style="padding: 20px 30px 20px 30px;display:none;">
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="layui-text-red">*</span>ID</label>
        <div class="layui-input-block">
            <input type="text" name="id" readonly lay-verify="required" placeholder="请输入ID" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span class="layui-text-red">*</span>职务级别</label>
        <div class="layui-input-block">
            <select  name="position_type" lay-filter="position_type" lay-verify="" lay-search="" style="width: 100%;" >
                
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span class="layui-text-red">*</span>名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="layui-text-red">*</span>名称(英)</label>
        <div class="layui-input-block">
            <input type="text" name="name_en" lay-verify="required" placeholder="请输入名称(英文)" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="layui-text-red">*</span>排序号</label>
        <div class="layui-input-block">
            <input type="text" value="0" name="sort_idx" lay-verify="number" placeholder="小优先" autocomplete="off" class="layui-input">
        </div>
    </div>
    <!--<div class="layui-form-item">
        <label for="" class="layui-form-label">图标</label>
        <div class="layui-input-block">
            <input name="icon" type="text" id="iconPicker" value="layui-icon-component" lay-filter="iconPicker" class="hide">
        </div>
    </div>-->
    



    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="btn_ok" id="btn_ok" value="保存">
        <input type="button" lay-submit lay-filter="btn_cancel" id="btn_cancel" value="取消">
    </div>
</form>
</html>

